<template>
    <div class="mint-navbar" v-if="this.hasDept">
        <a class="mint-tab-item" :class="{ 'is-selected': perSelected }" @click="changePerPage">
            <div class="mint-tab-item-label">空间个人排名</div>
        </a>

        <a class="mint-tab-item" @click="changeTeamPage" :class="{'is-selected': teamSelected }">
            <div class="mint-tab-item-label">部门排名</div>
        </a>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                perSelected: true,
                teamSelected:false
            }
        },
        props:{
            hasDept:{
                type:Boolean,
                default:true
            }
        },
        methods:{
            changePerPage(){

                if(this.perSelected === true ) {
                    return ;
                }else{

                    this.perSelected = !this.perSelected;
                    this.teamSelected = !this.teamSelected;
                    this.$emit('changePer');
                }
            },
            changeTeamPage(){
                if(this.teamSelected === true) {
                    return;
                } else{

                    this.perSelected = !this.perSelected;
                    this.teamSelected = !this.teamSelected;
                    this.$emit('changeTeam');
                }
            }
        }
    }
</script>

<style>
    .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 2px solid #29B6F6;
        color: #29B6F6;
        margin-bottom: 0;
    }
    .mint-tab-item {
        color: #9E9E9E;
        font-size: 15px;
    }
    .mint-tab-item-label{
        font-size: 15px;
    }
    .hidden {
        display: none;
    }
</style>
